<template>
  <van-row id="sort" :style="{background:supplier?'#f6f6f6':'fff'}" >
    <div :class="typeName !== 'category'?'flexSort':'category-sort'">
      <van-col :span="show ? 6 : 8" v-if="typeName != 'LeaseSearch'">
        <div
          :class="[{'active':(sort.tab == 1&&typeName !== 'category')},
                   sort.up == 1?(typeName == 'category'?'evaluate-up':'up'):'',
                    sort.down == 1?(typeName == 'category'?'evaluate-down':'down'):'',
                    typeName == 'category'?'evaluate':'grid-content']"
          @click="toggle($event, 1)"
          v-if="!supplier"
        > 评价</div>
        <div
          class="grid-content"
          :class="{ active: sort.tab == 5, up: sort.up == 5, down: sort.down == 5 }"
          @click="toggle($event, 5)"
          v-if="supplier"
        >
          综合
        </div>
      </van-col>
      <van-col :span="show ? 6 : 8">
        <div
          :class="[{'active':(sort.tab == 2&&typeName !== 'category')},
            sort.up == 2?(typeName == 'category'?'grid-content-up':'up'):'' ,
            sort.down == 2?(typeName == 'category' ?'grid-content-down':'down'):'',
            typeName == 'category'?'grid-content-arrow':'grid-content']"
          @click="toggle($event, 2)"
        >销量</div>
      </van-col>
      <van-col :span="show ? 6 : 8">
        <div
          :class="[
            {'active':sort.tab ==3 &&typeName !== 'category'},
            sort.up == 3?(typeName == 'category'?'grid-content-up':'up'):'' ,
            sort.down == 3?(typeName == 'category'?'grid-content-down':'down'):'',
            typeName == 'category'?'grid-content-arrow':'grid-content']"
          @click="toggle($event, 3)"
        >
          价格
        </div>
      </van-col>
      <van-col :span="6" v-if="show && pluginShow">
        <div @click="toggle($event, 4)" class="flex-c">筛选 <i class="iconfont icon-fontclass-shaixuan"></i></div>
      </van-col>
    </div>
  </van-row>
</template>
<script>
import { mapState, mapMutations } from 'vuex';

export default {
  props: {
    text: {},
    hide: {},
    show: {
      default: false
    },
    pluginShow:{
      default: false
    },
    supplier: {
      default: false
    },
    typeName:{
      type:String,
      default:''
    }
  },
  data() {
    return {
      sort: { up: false, dows: false, tab: 0 }
    };
  },
  computed: {
    ...mapState(['view']),
    classObject() {
      return {
        active: this.isActive && !this.error,
        'text-danger': this.error && this.error.type === 'fatal'
      };
    }
  },

  methods: {
    ...mapMutations(['views']),
    toggle(event, n) {
      console.log(n);
      this.sort.up = n;
      let order_field = '';
      if (n == 4) {
        this.$emit('showscreen');
      } else {
        if (n == 1) order_field = 'comment_num';
        if (n == 2) order_field = 'show_sales';
        if (n == 5) order_field = 'id';
        if (event.target.className == 'grid-content up'||event.target.className == 'grid-content-arrow grid-content-up') {
          if (n == 3) order_field = 'max_price';
          if(this.typeName == 'category'){
            event.target.className = 'grid-content-arrow grid-content-down';
          }else{
            event.target.className = 'grid-content down';
          }
          this.$emit('sortIn', { order_field, order_by: 'desc' });
        } else {
          if (n == 3) order_field = 'min_price';
          if(this.typeName == 'category'){
            event.target.className = 'grid-content-arrow grid-content-up';
          }else{
            event.target.className = 'grid-content up';
          }
          this.$emit('sortIn', { order_field, order_by: 'asc' });
        }
      }
    }
  },
  mounted() {
    this.sort.up = false;
    this.sort.down = false;
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
::v-deep .category-sort .van-col--6:first-child{
  width: 20%;
}
#sort {
  background: #fff;
  line-height: 2.25rem;
  // border-bottom: solid 0.0625rem #f9f9f9;
  font-size: 12px;
  color: #333;

  .grid-content{
    position: relative;
  }

  .grid-content.up::after {
    background-position: -10.625rem -0.9375rem;
  }

  .grid-content.down::after {
    background-position: -10.625rem 0;
  }
  .evaluate{
    &::after{
      right: 10% !important;
    }
    &::before{
      right: 10% !important;
    }
  }
  .grid-content-arrow,.evaluate{
    position: relative;
    &::after{
      content: '';
      position: absolute;
      top:55%;
      right: 15%;
      display: inline-block;
      width: 0.5rem;
      height: 0.2188rem;
      border-left: 0.21rem solid transparent;
      border-right: 0.21rem solid transparent;
      border-top: 0.21rem solid #AAAAB3;
      // margin-left: 0.25rem;
    }
    &::before{
      content: '';
      position: absolute;
      top:40%;
      right: 15%;
      display: inline-block;
      width: 0.5rem;
      height: 0.2188rem;
      border-left: 0.21rem solid transparent;
      border-right: 0.21rem solid transparent;
      border-bottom: 0.21rem solid #AAAAB3;
      // margin-left: 0.25rem;

    }
  }
  .grid-content-up,.grid-content-down,.evaluate-up{
    position: relative;
  }
  .evaluate-up::after,.evaluate-up::before{
    right: 10% !important;
  }
  .grid-content-up::after,
  .grid-content-down::after,
  .evaluate-up::after,
  .grid-content-up::before,
  .grid-content-down::before,
  .evaluate-up::before{
    content: '';
    position: absolute;
    top:55%;
    right: 15%;
    display: inline-block;
    width: 0.5rem;
    height: 0.2188rem;
    border-left: 0.21rem solid transparent;
    border-right: 0.21rem solid transparent;
    margin-left: 0.25rem;
  }
  .grid-content-up::before,
  .grid-content-down::before,
  .evaluate-up::before{
    top:40% !important;
  }
  .grid-content-up::before{
    border-bottom: 0.21rem solid var(--themeBaseColor) !important;
  }
  .grid-content-up::after{
    border-top: 0.21rem solid #AAAAB3 !important;
  }
  .grid-content-down::before{
    border-bottom: 0.21rem solid #AAAAB3 !important;
  }
  .grid-content-down::after{
    border-top:  0.21rem solid var(--themeBaseColor) !important;
  }




  .grid-content.up,
  .grid-content.down {
    color: #f15353;
  }


  .grid-content::after {
    content: '';
    width: 0.5rem;
    height: 0.625rem;
    display: inline-block;
    background: url(../assets/images/jd-sprites.png) no-repeat;
    background-size: 12.5rem 12.5rem;
    background-position: -10.625rem -1.875rem;
    margin-left: 0.25rem;
  }

  i {
    color: #555;
  }

  .flex-c {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.flexSort{
  display: flex;
  justify-content: space-around;
}
</style>
